<template>
    <div class="sub-category">
        <div class="container">
            <!-- 面包屑 -->
            <SubBread />
            <!-- 筛选区域 -->
            <SubFilter @filter-change="filterChange"/>
            <!-- 结果区域  -->
            <div class="goods-list">
                <!-- 排序 -->
                <SubSort @sort-change="filterChange" />
                <!-- 列表 -->
                <ul>
                    <li v-for="goods in goodList" :key="goods">
                        <GoodsItem :goods="goods" />
                    </li>
                </ul>
                <!-- 无限加载 -->
                <XtxInfiniteLoading :loading="loading" :finished="finished" @infinite="getData" />
            </div>
        </div>
    </div>
</template>

<script>
    import { reactive, ref, toRefs, watch } from 'vue';
    import SubBread from './components/SubBread'
    import SubFilter from './components/SubFilter'
    import SubSort from './components/SubSort'
    import GoodsItem from './components/GoodsItem'
    import { getSubCategoryGoods } from '@/api/category'
    import { useRoute } from 'vue-router'
    export default {
        name: 'SubCategory',
        components: {
            SubBread,
            SubFilter,
            SubSort,
            GoodsItem
        },
        setup() {
            const route = useRoute()
            console.log(111, route);
            const state = reactive({
                loading: false,
                finished: false,
                goodList: [],
                reqParams: {
                    page: 1,
                    pageSize: 20,
                    categoryId: route.params.id
                }
            })
            const getData = () => {
                state.loading = true
                getSubCategoryGoods(state.reqParams).then(({ result }) => {
                    if (result.items.length) {
                        state.goodList.push(...result.items)
                        state.reqParams.page++
                    } else {
                        state.finished = true
                    }
                    state.loading = false
                })
            }
            watch(() => route.params.id, (newVal) => {
                if (newVal && route.path === `/category/sub/${newVal}`) {
                    state.goodList = []
                    state.reqParams.page = 1
                    state.reqParams.categoryId = newVal
                    state.finished = false
                }

            }, {
                immediate: true
            })

            // 筛选
            const filterChange = (filterParams) => {
                console.log('排序、属性筛选参数',filterParams);
                state.finished = false
                state.goodList = []
                state.reqParams.page = 1
                state.reqParams = { ...state.reqParams, ...filterParams }
                console.log('最终筛选参数', state.reqParams);
            }
            return {
                ...toRefs(state),
                getData,
                filterChange
            }
        }
    };
</script>

<style lang="less" scoped>
    .goods-list {
        background: #fff;
        padding: 0 25px;
        margin-top: 25px;

        ul {
            display: flex;
            flex-wrap: wrap;
            padding: 0 5px;

            li {
                margin-right: 20px;
                margin-bottom: 20px;

                &:nth-child(5n) {
                    margin-right: 0;
                }
            }
        }
    }
</style>